import React from 'react';
import {Table, Row, Col, Form, Input, Select, Button, Modal, Tabs, message, Steps} from 'antd';
import {downloadFile} from '../../../utils/commons'
import RIGHT from "../../../utils/RightConstants";
import RightBox from "../../../components/commons/RightBox";
import OperatorConstant from "../../../utils/OperatorConstant";
const Step = Steps.Step;
const R = require('ramda');
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const view= "view"

export default Form.create({wrappedComponentRef: true})(class EditStatement extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: true,
            type: "",
        }
    }

    handleCancel = () => {
        this.props.form.resetFields()
        this.setState({open:false})
        this.props.dispatch({
            type: 'settlement/refreshState',
            payload: {
                dataSource: {},
            }
        });

        this.props.dispatch({
            type: 'capital/setNode',
            payload: {
                node: {},
            }
        });
    }

    handleOpen = (type) => {
        this.state.type = type;
        this.setState({open: true})
    }


    exportStatement = (id) => {
        this.props.dispatch({
            type: 'settlement/generateStatement',
            payload: {
                id: id,
            }
        });
        this.handleCancel();
    }

    download = (type, url) => {
        downloadFile(type, url)
    }

    columns = [
        {title: '订单id', dataIndex: 'orderId', key: 'orderId', width: '100px'},
        {title: '订单号', dataIndex: 'orderNo', key: 'orderNo', width: '100px'},
        {title: '费用id', dataIndex: 'costId', key: 'costId', width: '100px'},
        {title: '款项类型', dataIndex: 'chargeTypeName', key: 'chargeTypeName', width: '100px'},

        {title: '原金额(CNY)', dataIndex: 'costSourceAmt', key: 'costSourceAmt', width: '100px'},
        {title: '此次结算金额(CNY)', dataIndex: 'costAmt', key: 'costAmt', width: '100px'},
        {title: '结算余额(CNY)', dataIndex: 'costBalance', key: 'costBalance', width: '100px'},
        {title: '提交时间', dataIndex: 'createtime', key: 'createtime'}
    ];

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {labelCol: {xs: {span: 8}, sm: {span: 8}}, wrapperCol: {xs: {span: 15}, sm: {span: 14}}};
        let dataSource = R.isNil(this.props.dataSource.statement) ? {} : this.props.dataSource.statement;
        let detail = R.isNil(this.props.dataSource.detail) ? [] : this.props.dataSource.detail;

        let footer = [];

        footer.push(<Button key="cancel" size="large"  onClick={this.handleCancel.bind(this, true)}>取消</Button>);
        footer.push(<RightBox resource={RIGHT.SETTLEMENT.SETTLEMENT_PAYAPPLY_EXPORT}><Button key="next" size="large"  onClick={this.exportStatement.bind(this, dataSource.id)} style={{ display: "inline-block" }}>导出申请书</Button></RightBox>);


        let node = R.isNil(this.props.capital) || R.isNil(this.props.capital.node) ? {} : this.props.capital.node;
        let nodename =""
        let step = "";
        let role =[];
        let isbypass = node.isbypass;
        let approvalDisable = true;



        //当前用户拥有的角色
        if(!R.isNil(node.roles) && !R.isEmpty(node.roles)){
            for(let i=0; i< node.roles.length; i++){
                role.push(node.roles[i].roleId);
            }
        }


        //越级审核
        if(isbypass == 1){
            let approvalRoles =[];

            //审核链角色
            let approvalRole = node.approvalRole;

            let flag = false;
            if(!R.isNil(node.list) && !R.isEmpty(node.list)){
                if(approvalRole == node.list[i].role){
                    flag = true;
                }

                if(flag && R.isNil(node.list[i].role) && R.isEmpty(node.list[i].role) ){
                    approvalRoles.push(node.list[i].role);
                }
            }


            approvalDisable = this.state.type == OperatorConstant.view|| R.isNil(node.approvalRole) || !R.intersection(approvalRoles, approvalRole);


        }else{
            if(!R.isNil(node.list) && !R.isEmpty(node.list) &&  !R.isEmpty(node.roles)){
                let currentNode = 0;

                for(let i=0; i< node.list.length; i++){
                    if(node.nodeName == node.list[i].name){
                        currentNode = i;
                        nodename += "：当前审核节点【" + node.list[i].name + "】";
                        break;
                    }

                }

                for(let i=0; i< node.roles.length; i++){
                    role.push(node.roles[i].roleId);
                }

                step = <Steps current={currentNode} style={{width: '95%'}}>
                    {
                        R.isNil(node.list) || R.isEmpty(node.list)  ? <Step title=""></Step>
                            :
                            node.list.map(item => {
                                return (<Step title={item.name}></Step>);
                            })
                    }
                </Steps>
            }
            approvalDisable =  this.state.type == OperatorConstant.view || R.isNil(node.approvalRole) || !R.contains(node.approvalRole, role);

        }


        return (
            <Modal visible={this.state.open} title={R.isEmpty(step) ? "结算单" : step } width={1000} wrapClassName="vertical-center-modal"
                   footer={footer} onCancel={this.handleCancel.bind(this,true)}>
                <Form>
                    <Row>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="结算单号" hasFeedback>
                                {getFieldDecorator('stateno', {
                                    rules: [{
                                        required: true, message: '请输入结算单号'
                                    }],
                                    initialValue: dataSource.stateno
                                })(
                                    <Input maxLength="20" disabled={this.props.disabled || this.state.type == view}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="转款金额" hasFeedback>
                                {getFieldDecorator('transferamount', {
                                    rules: [{
                                        required: true, message: '请输入转款金额'
                                    }],
                                    initialValue: dataSource.transferamount
                                })(
                                    <Input maxLength="20" disabled={this.props.disabled || this.state.type == view}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="结算时间" hasFeedback>
                                {getFieldDecorator('createtime', {
                                    rules: [{
                                        required: true, message: '请输入结算时间'
                                    }],
                                    initialValue: dataSource.createtime
                                })(
                                    <Input maxLength="20" disabled={this.props.disabled || this.state.type == view}/>
                                )}
                            </FormItem></Col>
                    </Row>
                    <Row>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="结余金额" hasFeedback>
                                {getFieldDecorator('unpayamount', {
                                    rules: [{
                                        required: true, message: '请输入结余金额'
                                    }],
                                    initialValue: dataSource.unpayamount
                                })(
                                    <Input maxLength="30" disabled={this.props.disabled || this.state.type == view}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="收款人" hasFeedback>
                                {getFieldDecorator('accname', {
                                    rules: [{
                                        required: true, message: '请输入收款人'
                                    }],
                                    initialValue: dataSource.accname
                                })(
                                    <Input maxLength="30" disabled={this.props.disabled || this.state.type == view}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="转款确认函" hasFeedback>
                                {getFieldDecorator('url', {
                                    rules: [{
                                        required: true, message: '请输入转款确认函'
                                    }],
                                    initialValue: dataSource.url
                                })(
                                    <a href="#" onClick={this.download.bind(this, "statement",dataSource.url)}> {R.isNil(dataSource.url) || R.isEmpty(dataSource.url) ? "无" : "下载"}</a>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="开户行" hasFeedback>
                                {getFieldDecorator('accopenbank', {
                                    rules: [{
                                        required: true, message: '请输入开户行'
                                    }],
                                    initialValue: dataSource.accopenbank
                                })(
                                    <Input maxLength="30" disabled={this.props.disabled || this.state.type == view}/>
                                )}
                            </FormItem></Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="备注" hasFeedback>
                                {getFieldDecorator('memo', {
                                    rules: [{
                                        required: true, message: '请输入备注'
                                    }],
                                    initialValue: dataSource.memo
                                })(
                                    <Input maxLength="30" disabled={this.props.disabled || this.state.type == view}/>
                                )}
                            </FormItem></Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="收款账号" hasFeedback>
                                {getFieldDecorator('accno', {
                                    rules: [{
                                        required: true, message: '请输入收款账号'
                                    }],
                                    initialValue: dataSource.accno
                                })(
                                    <Input maxLength="30" disabled={this.props.disabled || this.state.type == view}/>
                                )}
                            </FormItem></Col>
                    </Row>
                    <Row>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="状态" hasFeedback>
                                {getFieldDecorator('status', {
                                    rules: [{
                                        required: true, message: '请输入状态'
                                    }],
                                    initialValue: R.isNil(dataSource.status) || !R.contains(dataSource.status, ["","2","3", "4", "5","6"]) ? "" : dataSource.status
                                })(

                                    <Select disabled={this.props.disabled || this.state.type == view}>
                                        <Option value="2">待审核</Option>
                                        <Option value="3">审核失败</Option>
                                        <Option value="4">待付款</Option>
                                        <Option value="5">已付款</Option>
                                        <Option value="6">付款失败</Option>
                                    </Select>
                                )}
                            </FormItem></Col>
                    </Row>
                </Form>

                <Tabs tabPosition={'top'}>
                    <TabPane tab="转账明细" key="1">
                        <Table rowKey={record => record.id} dataSource={detail} columns={this.columns} bordered={true} size={'middle'} pagination={false}/>
                    </TabPane>
                </Tabs>
            </Modal>
        );
    }
})

